<script setup>
import { ref, onMounted } from 'vue'
import { getCategoriesAPI, getSimpleArticlesByCategoryIdAPI,addCategoryAPI, updateCategoryNameByIdAPI } from '../../../apis/apis';
import { RouterLink } from 'vue-router';

// 分类数据
const tableData = ref([])
// 是否暂时抽屉
const drawer = ref(false)
// 抽屉展示的文章列表
const simpleArticleList = ref([])
// 修改分类编辑按钮
const edit = (row) => {
  ElMessageBox.prompt('', '修改分类名称', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPlaceholder: row.name,
    callback: async (action) => {
      if (action.action === "confirm") {
        if (action.value === row.name) {
          ElMessage({
            type: 'warning',
            message: '请勿重复输入',
          })
          return
        }
        const res = await updateCategoryNameByIdAPI(row.id, action.value)
        if (res.code === 1) {
          // 修改分类名称
          ElMessage({
            type: 'success',
            message: '修改成功',
          })
          getCategories()
        } else {
          ElMessage({
            type: 'info',
            message: '修改失败',
          })
        }
      } else {
        ElMessage({
          type: 'info',
          message: '取消修改',
        })
      }
    }
  })
}
// 点击详情按钮
const detail = async (row) => {
  drawer.value = true
  // 请求该分类下的文章
  const res = await getSimpleArticlesByCategoryIdAPI(row.id)
  simpleArticleList.value = res.data
}

const getCategories = async () => {
  const res = await getCategoriesAPI()
  tableData.value = res.data
}
// 新增分类
const open = (parentId = 0) => {
  ElMessageBox.prompt('', '新增分类', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPlaceholder: '新分类名称', 
    callback: async (action) => {
      if (action.action === "confirm") {
        if (tableData.value?.find(item => item.name === action.value)) {
          ElMessage({
            type: 'warning',
            message: '请勿重复输入',
          })
          return
        }
        const res = await addCategoryAPI(action.value, parentId)
        
        if (res.code === 1) {
          // 修改分类名称
          ElMessage({
            type: 'success',
            message: '新增成功',
          })
          getCategories()
        } else {
          ElMessage({
            type: 'info',
            message: '新增失败',
          })
        }
      } else {
        ElMessage({
          type: 'info',
          message: '取消新增',
        })
      }
    }
  })
}


onMounted(() => {
  getCategories()
})
</script>

<template>
  <div class="px-8 py-8 flex flex-col">
    <div class="flex items-center justify-center mb-3 w-full">
      <el-button type="primary" class="w-1/4" @click="open(0)">
        <div class="font-semibold tracking-widest text-xl">
          新增分类
        </div>
      </el-button>
    </div>
   

    <el-table
      size="large"
      highlight-current-row
      row-class-name="h-14 w-full text-md"
      header-row-class-name="h-12 text-sm font-mono"
      table-layout="auto"
      :data="tableData"
      row-key="id"
      stripe
      lazy
    >
      <el-table-column
        label="创建时间"
        sortable
        class-name="w-1/3"
      >
        <template #default="scope">
          {{ scope.row.createTime.substr(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="分类名称"
        sortable
      >

        <template #default="scope">

          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column
        prop="count"
        label="关联文章数"
        sortable
      >

        <template #default="scope">
          <div
            v-if="scope.row.count"
            class="pl-3"
          >
            {{ scope.row.count }} 篇
          </div>
          <div
            v-else
            class="pl-3"
          >
            <div>
              待写文章
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="Operations"
        width="180"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="open(scope.row.id)"
          >新增</el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="detail(scope.row)"
          >详情</el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="edit(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
  <el-drawer
    v-model="drawer"
    :show-close="true"
    :with-header="false"
    show-close
    size="40%"
  >
    <span class="flex items-center justify-between text-xl">
      <div>
        关联列表 ({{ simpleArticleList.length }} 篇):
      </div>
    </span>
    <el-timeline style="max-width: 600px">
      <div class="px-3 pt-5">
        <el-timeline-item
          v-for="(simpleArticle, index) in simpleArticleList"
          :key="index"
        >
          <RouterLink
            :to="{ path: '/edit', query: { type: 'preview', id: simpleArticle.id } }"
            class="flex items-center justify-between  cursor-pointer border-b border-collapse hover:border-red-400"
          >
            <div class="font-medium text-gray-700 tracking-wide text-xl">
              {{ simpleArticle.title }}

            </div>
            <div class="font-sm text-gray-600 tracking-wide text-sm pr-2">
              {{ simpleArticle.count }} 字
            </div>
          </RouterLink>
        </el-timeline-item>
      </div>
    </el-timeline>
  </el-drawer>
</template>

<style
  scoped
  lang='scss'
></style>